<template>
  <!-- <h2>测试pinia--{{ store.num }}</h2> -->
 
  <!-- 粒子背景 -->
  <vue-particles id="tsparticles" :options="particlesOptions" />
  <!-- 登录板块 -->
  <div class="lohinMo">
    <div class="logo">
      <img src="../../img/logo.png" alt="" srcset="">
    </div>

  <a-form
    :model="formState"
    name="basic"
    :label-col="{ span: 2}"
    :wrapper-col="{ span: 22 }"
    autocomplete="off"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
    <a-form-item :wrapper-col="{ offset: 1, span: 22 }" name="username" 
    :rules="[{ required: true, message: '账号不能为空' }, {min:3,max:15,message:'账号应该在3到15位',tigger:'blur'}]"
    >
      <a-input v-model:value="formState.username" placeholder="请输入您的账号" ref="account">
      <template #prefix><UserOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
    </a-input>

    </a-form-item>

    <a-form-item :wrapper-col="{ offset: 1, span: 22 }"
      
      name="password"
      :rules="[{ required: true, message: '密码不能为空！' }]"
    >
      <a-input-password v-model:value="formState.password" placeholder="请输入你的密码">
      <template #prefix><LockOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
    </a-input-password>

      
    </a-form-item>

    <a-form-item name="remember" :wrapper-col="{ offset: 1, span: 14 }">
      <a-checkbox v-model:checked="formState.remember">记住密码</a-checkbox>
    </a-form-item>

    <a-form-item :wrapper-col="{ offset: 1, span: 22 }">
      <a-button type="primary" block html-type="submit" :loading="isLoading">提交</a-button>
    </a-form-item>
  </a-form>
</div>

</template>
<script setup>
// 测试code
// const store = useUserStore();

import { ref ,onMounted} from 'vue';
import { reactive } from 'vue';
import router from '../../router'; // 保留这一行
import particlesOptions from "../../config/particles";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";

import {LoginApi} from "../../api/user";

import useUserStore from "../../store/user";
const userStore = useUserStore();

// 发送请求loading
const isLoading = ref(false);

// 获取账号密码【记住密码】
const info = getStorage("userInfo");

// 双向数据绑定表单
const formState = reactive(info ? info : {
  username: '',
  password: '',
  remember: true,
});

// 自动获得焦点
const account = ref(null);
onMounted(() => {
  account.value.focus();
});

// 验证成功后登录
const onFinish = async (values) => {
  // 记住密码的功能
  const { username, password, remember } = values;
  // 保存密码-本地存储
  remember ? setStorage("userInfo", values) : removeStorage("userInfo");
  console.log('Success:', values);
  isLoading.value = true;

  userStore.getUserToken({ username, password }).then((res)=>{
    // 成功
    message.success("恭喜你，，登陆成功");
    isLoading.value = false;
    router.push({name:"dashboard"})

  })
  // .catch((e)=>{
  //   console.log(e);
  //   isLoading.value = false;

  // })


// 1.方式1：promise形式
  // LoginApi({username,password})
  //   .then(res=>{
  //     // 成功
  //       console.log(res);
  //       isLoading.value = false;
  // })
  // .catch((e)=>{
  //   console.log(e);
  // });

  // 方式二：async...await
  // try {
  //     const res = await LoginApi({ username,password});
  //     console.log(res);
  //     router.push({name:"home"})
  // } catch (error) {
  //   console.log(error)
  // }




  // setTimeout(() => {
  //   isLoading.value = false;
  //   // 使用已经导入的 router 实例进行页面跳转
  //   router.push("/home"); 
  //   message.success("已登录成功");
  //   account.value.focus();
  // }, 3000);
};

// 验证失败
const onFinishFailed = errorInfo => {
  message.error("验证错误，请处理");
};

// 其他辅助函数
function getStorage(key) {
  return JSON.parse(localStorage.getItem(key)) || null;
}

function setStorage(key, value) {
  localStorage.setItem(key, JSON.stringify(value));
}

function removeStorage(key) {
  localStorage.removeItem(key);
}
</script>
<style lang="less" scoped>
// less:css
  .lohinMo{
    width: 450px;
    background-color: rgba(73, 74, 74, 0.584);
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    padding: 20px 18px;
    box-shadow: 5px 5px 5px rgb(41, 40, 40);
    border-radius: 20px;
     .logo{
      display: flex;
      justify-content: center;
      img{
        width: 120px;
        padding: 10px 0px;
      }
    }
  }
</style>